<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <canvas width="400" height="400"></canvas>
    <script>
        let canvas = document.getElementsByTagName("canvas")[0];
        let context = canvas.getContext("2d");

        // 改变原点
        context.translate(200, 200);
        // 旋转画布
        // context.rotate(Math.PI);
        setInterval(function () {
            // 清空画布
            context.clearRect(-200, -200, 400, 400);
            // 绘制大圆
            context.beginPath();
            context.arc(0, 0, 150, 0, 2 * Math.PI);
            context.closePath();
            context.stroke();
            // 绘制表盘刻度
            for (let i = 0; i < 60; i++) {
                context.beginPath();
                if (i % 5 == 0) {
                    context.moveTo(0, -150);
                    context.lineTo(0, -130);
                    context.lineWidth = 4;
                } else {
                    context.moveTo(0, -150);
                    context.lineTo(0, -140);
                    context.lineWidth = 2;
                }
                context.closePath();
                context.stroke();
                context.rotate(6 / 180 * Math.PI);

            }
            // 获取当前的时分秒
            let time = new Date();
            let h = time.getHours() - 12;
            let m = time.getMinutes();
            let s = time.getSeconds();
            // 计算旋转度数（弧度制）
            let hrotate = (h + m / 60) * 30 / 180 * Math.PI;
            let mrotate = m * 6 / 180 * Math.PI;
            let srotate = s * 6 / 180 * Math.PI; //60 66
            // 绘制秒针
            context.save();
            context.rotate(Math.PI);
            context.rotate(srotate);
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(0, 125);
            context.lineWidth = 2;
            context.closePath();
            context.stroke();
            context.restore();
            // 绘制分针
            context.save();
            context.rotate(mrotate);
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(0, -100);
            context.lineWidth = 4;
            context.closePath();
            context.stroke();
            context.restore();
            // 绘制时针
            context.save();
            context.rotate(hrotate);
            context.beginPath();
            context.moveTo(0, 0);
            context.lineTo(0, -80);
            context.lineWidth = 6;
            context.closePath();
            context.stroke();
            context.restore();
        }, 1000)
    </script>
</body>

</html>